﻿<%@ page pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
    <head>
        <!-- Meta -->
        <meta charset="utf-8"/>
        <title>Inscription</title>
        
        <!-- CSS -->
        <link rel="stylesheet" href="medias/css/form.css" type="text/css" media="screen"/>
		
		<!-- JQuery -->
		<meta name="viewport" content="width=device-width, initial-scale=1"/> 
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css"/>
		<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
		<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
    </head>
    
    <body>
    	<div data-role="page">
    	
			<div data-role="header">
            	<div id="banniere">
                	<br/> <br/>
                    <h1 >CrecheBook</h1>
                </div>
                <div id="searchBox">
        			<div class="ui-bar ui-bar-c">        
                    	<a href='search.jsp' rel='external' data-role='button' data-theme='c' data-corners='true' data-icon='home' data-inline='true'>Accueil</a>
                        <h2>Formulaire d'inscription</h2>
                    </div>
                </div>
            </div>
		
			<div data-role="content">
				<form method="post" action="inscription" data-ajax="false">
		            <fieldset>
		                <legend>Inscription</legend>
		                <p>Vous pouvez vous inscrire en tant qu'administrateur via ce formulaire</p>
		                <br/> <br/>
		 
		 				<label for="code">Code admin <span class="requis">*</span></label>
		 				<div class="ui-grid-a" style="margin-top:-5px;">
		                	<div class="ui-block-a" style="height:50px;">
		                		<input type="password" id="code" name="code" value="" maxlength="20"/>
		                	</div>
		                	<div class="ui-block-b" style="height:50px;padding-top:18px;text-align:center;font-size:14px;">
		                		<span class="erreur">${form.erreurs['code']}</span>
		                	</div>
						</div>
						<br/>
		                
		                <label for="email">Adresse email <span class="requis">*</span></label>
		                <div class="ui-grid-a" style="margin-top:-5px;">
		                	<div class="ui-block-a" style="height:50px;">
		                		<input type="email" id="email" name="email" value="<c:out value="${admin.email}"/>" maxlength="60"/>
		                	</div>
		                	<div class="ui-block-b" style="height:50px;padding-top:18px;text-align:center;font-size:14px;">
		                		<span class="erreur">${form.erreurs['email']}</span>
		                	</div>
		                </div>
		                <br/>
		                
		                <label for="identifiant">Nom d'utilisateur <span class="requis">*</span></label>
		                <div class="ui-grid-a" style="margin-top:-5px;">
		                	<div class="ui-block-a" style="height:50px;">
		                		<input type="text" id="identifiant" name="identifiant" value="<c:out value="${admin.identifiant}"/>" maxlength="20"/>
		                	</div>
		                	<div class="ui-block-b" style="height:50px;padding-top:18px;text-align:center;font-size:14px;">
		                		<span class="erreur">${form.erreurs['identifiant']}</span>
		                	</div>
		                </div>
		                <br/>
		 
		                <label for="motdepasse">Mot de passe <span class="requis">*</span></label>
		                <div class="ui-grid-a" style="margin-top:-5px;">
		                	<div class="ui-block-a" style="height:50px;">
		                		<input type="password" id="motdepasse" name="motdepasse" value="" maxlength="20"/>
		                	</div>
		                	<div class="ui-block-b" style="height:50px;padding-top:18px;text-align:center;font-size:14px;">
		                		<span class="erreur">${form.erreurs['motdepasse']}</span>
		                	</div>
		                </div>
		                <br/>
		 
		                <label for="confirmation">Confirmation du mot de passe <span class="requis">*</span></label>
		                <div class="ui-grid-a" style="margin-top:-5px;">
		                	<div class="ui-block-a" style="height:50px;">
		                		<input type="password" id="confirmation" name="confirmation" value="" maxlength="20"/>
		                	</div>
		                	<div class="ui-block-b" style="height:50px;padding-top:18px;text-align:center;font-size:14px;">
		                		<span class="erreur">${form.erreurs['confirmation']}</span>
		                	</div>
		                </div>
		                <br/>
		                
		                <label for="ville">Gestion de la ville <span class="requis">*</span></label>
		                <div class="ui-grid-a" style="margin-top:-5px;">
		                	<div class="ui-block-a" style="height:50px;width:25%;">
				                <select id="ville" name="ville" data-native-menu="false">
								  <option value="" data-placeholder="true"> Ville </option>
								  <option value="Toulouse"> Toulouse </option>
								  <option value="Montpellier"> Montpellier </option>
								  <option value="Lyon"> Lyon </option>
								</select>
							</div>
							<div class="ui-block-b" style="height:50px;width:25%;"></div>
							<div class="ui-block-c" style="height:50px;padding-top:18px;text-align:center;font-size:14px;">
								<span class="erreur">${form.erreurs['ville']}</span>
							</div>
						</div>
						<br/> <br/> <br/> <br/>
		 
		 				<div style="width:250px;height:50px;margin:auto;">
		 					<input type="submit" value="Inscription" data-theme="b"/>
		                </div>
		                <br/>
		                
		                <p class="erreur" align="center" style="font-size:14px;">
		                	${form.resultat}
		                </p>
		            </fieldset>
		        </form>
	    	</div>
	        
			<div data-role="footer">
				<h4 style="margin:30px;">
					<strong> CrecheBook 2013 </strong> <br/>
					<a href="legal.jsp" data-ajax="false">Mentions&nbsp;l&eacute;gales</a>&nbsp;|&nbsp;
					<a href="connexion" data-ajax="false">Administateur</a>
				</h4>
			</div>
			
		</div>
		
		<script type="text/javascript">
			if (document.getElementById('email').value == 'key') {
				document.getElementById('email').value = '';
			}
		</script>
    </body>
</html>